<style>
    table>tbody>tr>th:nth-child(1),table>tbody>tr>th:nth-child(3) {
        width: 15%;
        text-align: center;
        vertical-align: middle;
    }

    table>tbody>tr>th:nth-child(2),table>tbody>tr>th:nth-child(4) {
        width: 35%;
        text-align: left;
        vertical-align: middle;
    }

</style>

<div class="modal fade" id="updateIPSegment" tabindex="-1" role="dialog"
     aria-labelledby="updateIPSegmentLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="updateIPSegmentLabel">
                    编辑
                </h4>
            </div>
            <div class="modal-body">
                <form>
                    <input type="text" id="updateId" style="display: none;">
                    <table id="example1" class="table table-bordered">
                        <tbody>
                            <tr>
                                <th>IP网段</th>
                                <th>
                                    <div>
                                        <p class="form-control-static" id="updateSegment"></p>
                                    </div>
                                </th>
                                <th>IP环境</th>
                                <th>
                                    <div>
                                        <select class="form-control" id="updateIP_environment">
                                            {% for evironment in IP_environment_ %}
                                                <option value="{{ evironment.0 }}">{{ evironment.1 }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </th>
                            </tr>
                            <tr>
                                <th>备注</th>
                                <th colspan="3">
                                    <textarea class="form-control" id="updateIP_description" rows="4"></textarea>
                                </th>
                            </tr>
                            <tr>
                                <th>无效IP</th>
                                <th colspan="3">
                                    <div id="invalid-selectize">
                                    </div>
                                </th>
                            </tr>
                            <tr>
                                <th>空闲IP</th>
                                <th>
                                    <div>
                                      <label for="updateIdleIP">合计0个</label>
                                      <select multiple="" class="form-control" id="updateIdleIP">
                                      </select>
                                    </div>
                                </th>
                                <th>占用IP</th>
                                <th>
                                    <div>
                                      <label for="updateUsedIP">合计0个</label>
                                      <select multiple="" class="form-control" id="updateUsedIP">
                                      </select>
                                    </div>
                                </th>
                            </tr>
                        </tbody>
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="updateIPSegment()">
                    更新
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script>
    function invalidIPSelect(id, invalid_IP){
        $('#invalid-selectize').empty().append('<select id="updateInvalidIP" style="display: none;"></select>')
        $('#updateInvalidIP').selectize({
            valueField: 'id',
            labelField: 'text',
            searchField: 'text',
            maxItems: 255,
            preload: true,
            load: function(query, callback) {
                $.ajax({
                    url: '/assets/find_idle_ip/',
                    dataType: 'json',
                    data: {
                        IP_segment: id,
                    },
                    type: 'POST',
                    error: function() {
                        callback();
                    },
                    success: function(res) {
                        callback(res.results);
                        var defaultValue=[]
                        for(i of invalid_IP.items){
                            defaultValue.push(i.id)
                        }
                        $('#updateInvalidIP').selectize()[0].selectize.setValue(defaultValue)
                    }
                });
            }
        });
    }

    function openIPSegmentModal(ele){
        var id = $(ele).attr('data-id')
        let idc_td_obj = $(this).parents('tr').children();
        $.ajax({
            url: '/api/ipsegment/'+id+'/',
            type: 'GET',
            success: function (res) {
                $('#updateId').val(id)
                $('#updateSegment').text(res.segment)
                $("#updateIP_environment option[value='"+res.IP_environment+"']").prop("selected", true)
                $("#updateIP_environment").val(res.IP_environment)
                $('#updateIP_description').text(res.IP_description)
                getIPSegmentInfo(res.IP_category)
                invalidIPSelect(id, res.invalid_IP)
            },
            error: function (res) {
                $.alert({
                    title: 'Tips',
                    type: 'red',
                    content: '获取失败！',
                })
            }
        })
    }

    function getIPSegmentInfo(res){
        $('#updateIdleIP option').remove()
        $('#updateUsedIP option').remove()
        $('label[for="updateIdleIP"]').text()
        $('label[for="updateUsedIP"]').text()
        for(item of res.idle.items){
            $('label[for="updateIdleIP"]').text('合计'+res.idle.count+'个')
            $('#updateIdleIP').append('<option>'+item.IP+'</option>')
        }
        for(item of res.used.items){
            $('label[for="updateIdleIP"]').text('合计'+res.used.count+'个')
            $('#updateUsedIP').append('<option>'+item.IP+'</option>')
        }
    }

    // 更新禁用命令
    function updateIPSegment() {
        var id = $('#updateId').val()
        $.ajax({
            url: '/api/ipsegment/'+id+'/',
            type: 'PUT',
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify({
                    IP_segment: id,
                    IP_environment: $('#updateIP_environment').val(),
                    IP_description: $('#updateIP_description').val(),
                    invalidIP: $('#updateInvalidIP').val()
                }),
            success: function (res) {
                $.alert({
                    title: 'Tips',
                    type: 'green',
                    content: '修改成功！',
                })
                var td_obj=$('td>button[data-id='+res.id+']').parents('tr').children()
                td_obj[2].innerText=res.IP_category.idle.count+res.IP_category.used.count
                td_obj[3].innerText=res.IP_description
                var environment = {}
                {% for evironment in IP_environment_ %}
                    environment[{{ evironment.0 }}]='{{ evironment.1 }}'
                {% endfor %}
                td_obj[1].innerText=environment[res.IP_environment]
            },
            error: function (res) {
                $.alert({
                    title: 'Tips',
                    type: 'red',
                    content: '修改失败！',
                })
            }
        })
    }
</script>